<template>
  <div class="page-tree-select">
    <TreeSelect
      ref="treeSelect2"
      class="tree-select"
      :style="treeSelectStyle"
      name="demo"
      :multiple="false"
      :clearable="false"
      :searchable="true"
      :open-on-click="true"
      :options="modelTreeData"
      :limit="3"
      :max-height="200"
      v-model="selectedNodeId"
      placeholder="选择概念"
      noResultsText="未发现相关选项"
      :default-expand-level="1"
      @select="handleParentSelect" />
  </div>
</template>

<script>
import TreeSelect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  props: {
    modelTreeData: {
      type: Array,
      default: function () {
        return []
      }
    },
    conceptId: {
      type: String,
      default: ''
    },
    treeSelectStyle: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      selectedNodeId: this.conceptId
    }
  },
  methods: {
    handleParentSelect (v) {
      this.$emit('handleSelect', v.id)
    }
  },
  components: {
    TreeSelect
  }
}
</script>

<style lang="less" scoped>

</style>
